iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0

Array Cardio陣列方法

這次的練習,只有js的陣列方法,所以沒有成品的截圖><
https://ithelp.ithome.com.tw/upload/images/20240918/20169174YA0jnYSMhn.png

附上個人codepen

技巧點

1. some()

  • 在陣列中,遞迴每一個元素,並且判斷元素是否符合你所設定的條件函式,只要其中有一個元素有符合條件,則回傳true;若所有元素都不符合條件,就會傳false.
  • 此方法不會去改動到原始陣列.
const list = [
  {
    type: "fruit",
    name: "banana"
  },
  {
    type: "drink",
    name: "cola"
  },
  {
    type: "drink",
    name: "tea"
  },
];

const haveFruit = list.some((item, index, array) => {
  return item.type === "fruit";
})
// item依序為陣列的每一個物件,index為item在陣列中的索引值,array為list陣列本身.index、array參數是可選擇性帶入

console.log(haveFruit); // true
  • 從上面的範例中,可以發現就只有一個物品種類屬於fruit,有滿足至少一個元素符合條件.結果回傳為true.
const nums = [1, 2, 3, 4, 5];
const result = nums.some((num) => num > 10);
// 判斷陣列中是否至少有一個數字大於10

console.log(result); // false

2. every()

  • 判斷陣列中的所有元素,是否通過你設定的條件,最後回傳一個布林值.當全部元素通過回傳true;反之false.
const list = [
  {
    type: "fruit",
    name: "banana"
  },
  {
    type: "drink",
    name: "cola"
  },
  {
    type: "drink",
    name: "tea"
  },
]; 

const isAllFruit = list.every((item, index, array) => {
  return item.type === "fruit";
})

console.log(isAllFruit); // false
  • 拿跟上次some一樣的list陣列示範,程式碼部分幾乎一樣,只有將some替換成了every,結果就變成了false.因為every方法要求所有元素都要符合條件.

3. findIndex()

  • 從陣列中找尋第一個符合條件函式的元素,並將此元素在陣列中的索引位置回傳.
const food = ["cola", "cookie", "juice", "rice", "bread"];
const whereIsRice = food.findIndex((food, index, array) => {
  return food === "rice";
})
// food為遞迴中的元素,item為遞迴中的該元素陣列的索引值,array為要執行方法的此陣列food.
console.log(whereIsRice); // 3
  • 找到第一個符合條件的就會回傳他的索引值,假設今天陣列中有兩個元素符合的話,也只會回傳第一個找到的元素之索引值.如下:
const food = ["cola", "rice", "juice", "rice", "bread"];
const whereIsRice = food.findIndex((food, index, array) => {
  return food === "rice";
})
console.log(whereIsRice); // 1
  • 那陣列中都沒有符合條件的元素,就會回傳-1,
const age = [17, 6, 13, 16, 2];
const result = age.findIndex((item, index, array) => {
  return item > 18;
})
console.log(result); // -1

4.find()

  • 與上面的findIndex非常相似,用於找到符合條件的第一個元素,並將此元素整個回傳.若都沒有元素符合,則回傳undefined.
const nums = [1, 12, 3, 49, 25];
const result = nums.find((num, index, array) => {
  return num % 2 === 0;
})
console.log(result); // 12

const arr = [
  {
    name: "jack",
    grade: 48,
  },
  {
    name: "marry",
    grade: 20,
  },{
    name: "hank",
    grade: 78,
  },
]

const result = arr.find((item) => {
  return item.grade > 60;
})
console.log(result); // {name: 'hank', grade: 78}

心得

方法真的很多,當你要用的時候,還會想不起來有什麼可以用,這時候問chatGPT最快了哈哈,或是直接將需求整個告訴他,讓他幫你寫程式碼更快XD


上一篇
Ajax Type Ahead 非同步的JavaScript
下一篇
Fun with HTML5 Canvas趣味畫布
系列文
鱷魚帶我練習JavaScript之個人練功坊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言